<template>
    <canvas :id="id"></canvas>
</template>
<style>

</style>
<script>
    export default{
        props: {
            id: {
                type: String,
                default: 'myCanvas'
            }
        },
        data(){
            return{
                R: 26,
                CW: 400,
                CH: 320,
                OffsetX: 30,
                OffsetY: 30,
                PointLocationArr: []
            }
        },
        components:{

        },
        computed:{

        },
        methods:{
            CaculateNinePointLotion(diffX, diffY){
                 let Re = [];
                for (let row = 0; row < 3; row++) {
                    for (let col = 0; col < 3; col++) {
                        let Point = {
                            X: (this.OffsetX + col * diffX + ( col * 2 + 1) * this.R),
                            Y: (this.OffsetY + row * diffY + (row * 2 + 1) * this.R)
                        };
                        Re.push(Point);
                    }
                }
                return Re;
            },
            Draw(cxt, _PointLocationArr, _LinePointArr,touchPoint) {
                if(_LinePointArr.length > 0) {
                    cxt.beginPath();
                     for (let i = 0; i < _LinePointArr.length; i++) {
                        let pointIndex = _LinePointArr[i];
                        cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
                     }
                     cxt.lineWidth = 10;
                     cxt.strokeStyle = "#627eed";
                     cxt.stroke();
                     cxt.closePath();
                     if(touchPoint != null)
                     {
                        var lastPointIndex = _LinePointArr[_LinePointArr.length-1];
                        var lastPoint = _PointLocationArr[lastPointIndex];
                        cxt.beginPath();
                        cxt.moveTo(lastPoint.X,lastPoint.Y);
                        cxt.lineTo(touchPoint.X,touchPoint.Y);
                        cxt.stroke();
                        cxt.closePath();
                     }
                };
                for (let i = 0; i < _PointLocationArr.length; i++) {
                    let Point = _PointLocationArr[i];
                    cxt.fillStyle = "#627eed";
                    cxt.beginPath();
                    cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    cxt.fillStyle = "#ffffff";
                    cxt.beginPath();
                    cxt.arc(Point.X, Point.Y, this.R - 3, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    if(_LinePointArr.indexOf(i)>=0)
                    {
                        cxt.fillStyle = "#627eed";
                        cxt.beginPath();
                        cxt.arc(Point.X, Point.Y, this.R -16, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();
                    }
                }
            },
            IsPointSelect(touches,LinePoint) {
                for (let i = 0; i < this.PointLocationArr.length; i++) {
                    let currentPoint = this.PointLocationArr[i];
                    let xdiff = Math.abs(currentPoint.X - touches.pageX);
                    let ydiff = Math.abs(currentPoint.Y - touches.pageY);
                    let dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
                    if (dir < this.R ) {
                        if(LinePoint.indexOf(i) < 0){ LinePoint.push(i);}
                        break;
                    }
                }
            },
            InitEvent(canvasContainer, cxt) {
                let self = this;
                let LinePoint = [];
                canvasContainer.addEventListener("touchstart", function (e) {
                    self.IsPointSelect(e.touches[0],LinePoint);
                }, false);
                canvasContainer.addEventListener("touchmove", function (e) {
                    e.preventDefault();
                    let touches = e.touches[0];
                    self.IsPointSelect(touches,LinePoint);
                    cxt.clearRect(0,0,self.CW,self.CH);
                    self.Draw(cxt,self.PointLocationArr,LinePoint,{X:touches.pageX,Y:touches.pageY});
                }, false);
                canvasContainer.addEventListener("touchend", function (e) {
                    cxt.clearRect(0,0,self.CW,self.CH);
                    self.Draw(cxt,self.PointLocationArr,LinePoint,null);
                    self.$emit('successPwdSet',LinePoint.join(""));
                    LinePoint=[];
                }, false);
            }
        },
        created(){

        },
        mounted(){
            let c = document.getElementById(this.id);
            this.CW = document.body.offsetWidth;
            c.width = this.CW;
            c.height = this.CH;
            let cxt = c.getContext("2d");
            //两个圆之间的外距离就是说两个圆心的距离去除两个半径
            let X = (this.CW - 2*this.OffsetX - this.R*2*3) / 2;
            let Y = (this.CH - 2*this.OffsetY - this.R*2*3) / 2;
            this.PointLocationArr = this.CaculateNinePointLotion(X, Y);
            this.InitEvent(c, cxt);
            this.Draw(cxt, this.PointLocationArr, [], null);
        }
    }
</script>
